<template>
  <div class="main-container">    
    <!-- 数量控制器（横向切分） -->
    <div class="quantity-controller-split">
      <div class="quantity-info-box align-box">
        <div class="quantity-info-title">数量</div>
        <div class="quantity-info-value red">{{ totalCount }}</div>
      </div>
      <div class="controller-ops-box align-box">
        <div class="controller-wrapper">
          <button class="control-btn decrement-5" @click="adjustQuantity(-5)" :disabled="!contentParam">-5</button>
          <button class="control-btn decrement-1" @click="adjustQuantity(-1)" :disabled="!contentParam">-1</button>
          <input type="number" v-model.number="quantity" class="quantity-input" min="0" @input="handleQuantityInput" :disabled="!contentParam">
          <button class="control-btn increment-1" @click="adjustQuantity(1)" :disabled="!contentParam">+1</button>
          <button class="control-btn increment-5" @click="adjustQuantity(5)" :disabled="!contentParam">+5</button>
        </div>
        <div class="controller-btns-row">
          <button class="action-btn take-out" @click="takeOut" :disabled="!contentParam">取出</button>
          <button class="action-btn put-back" @click="putBack" :disabled="!contentParam">放入</button>
          <button class="action-btn refresh-btn" @click="fetchMsgAndCount" :disabled="!contentParam">刷新</button>
        </div>
      </div>
    </div>

    <div class="long-introduction">
      <h2>功能介绍</h2>
      <p>{{ msgText }}</p><br>
      <h3>特征标签</h3>
      <div class="feature-tag-list">
        <template v-if="tagArr.length > 0">
          <span v-for="(tag, idx) in tagArr" :key="idx" class="feature-tag">{{ tag }}</span>
        </template>
        <template v-else>
          <span class="feature-tag">无特征</span>
        </template>
      </div>
    </div>
    
    <!-- 操作结果提示 -->
    <div 
      class="operation-result"
      v-if="operationMessage"
      :class="operationType"
    >
      {{ operationMessage }}
    </div>
  </div>
</template>

<script>
import axios from 'axios';

// 使用选项式API避免setup相关问题
export default {
  data() {
    return {
      contentParam: '',
      userParam: '',
      quantity: 0,
      totalCount: 0,
      msgText: '',
  tags: '',
  tagArr: [],
      operationMessage: '',
      operationType: ''
    };
  },
  mounted() {
    this.parseUrlParams();
    this.fetchMsgAndCount();
  },
  methods: {
    // 获取msg和count
    async fetchMsgAndCount() {
      try {
        // 直接用已存储的 contentParam
        const context = this.contentParam || '';
        const res = await axios.get(`http://localhost:8080/project/getMsgAndCount`, {
          params: { name: context }
        });
        const data = res.data;
        if (data && data.code === 1 && data.msg) {
          this.msgText = data.msg.msg;
          this.totalCount = data.msg.count;
        } else {
          this.msgText = '无数据';
          this.totalCount = 0;
        }

        const res2 = await axios.get(`http://localhost:8080/project/getTags`, {
          params: { name: context }
        });
        const tagData = res2.data;
        if (tagData && tagData.code === 1 && tagData.msg) {
          let x = tagData.msg;
          let arr = [];
          if (x.tag1 != null && x.tag1 !== '\n' && x.tag1 !== '') arr.push(x.tag1);
          if (x.tag2 != null && x.tag2 !== '\n' && x.tag2 !== '') arr.push(x.tag2);
          if (x.tag3 != null && x.tag3 !== '\n' && x.tag3 !== '') arr.push(x.tag3);
          this.tagArr = arr;
          this.tags = arr.join(' ');
        } else {
          this.tagArr = [];
          this.tags = '无特征';
        }
      } catch (e) {
        this.msgText = '接口请求失败';
        this.totalCount = 0;
      }
    },
    // 解析URL参数的方法
    parseUrlParams() {
      // 推荐用 vue-router 方式读取参数
      this.contentParam = this.$route.query.context || '';
      this.userParam = this.$route.query.user || '';
    },
    // 调整数量
    adjustQuantity(value) {
      const newValue = this.quantity + value;
      this.quantity = Math.max(0, newValue);
    },
    // 处理输入框输入
    handleQuantityInput() {
      if (this.quantity < 0 || isNaN(this.quantity)) {
        this.quantity = 0;
      }
    },
    // 取出操作
    takeOut() {
      if (this.quantity <= 0) {
        this.showOperationMessage('数量必须大于0才能取出', 'error');
        return;
      }
      if (this.quantity > this.totalCount) {
        this.showOperationMessage('取出数量不能大于总量', 'error');
        return;
      }
      const context = this.contentParam || '';
      axios.post(`http://localhost:8080/project/takeByName?name=${context}&count=${this.quantity}`)
        .then(res => {
          const data = res.data;
          if (data && data.code === 1 && data.data == "success") {
            this.fetchMsgAndCount(); // 操作成功后刷新数据
            this.showOperationMessage(`已取出 ${this.quantity} 个物品`, 'success');
          } else {
            this.showOperationMessage('操作失败', 'error');
          }
        })
        .catch(() => {
          this.showOperationMessage('请求失败', 'error');
        });
    },
    // 放回操作
    putBack() {
      if (this.quantity <= 0) {
        this.showOperationMessage('数量必须大于0才能放回', 'error');
        return;
      }
      const context = this.contentParam || '';
      axios.post(`http://localhost:8080/project/giveByName?name=${context}&count=${this.quantity}`)
        .then(res => {
          const data = res.data;
          if (data && data.code === 1 && data.data == "success") {
            this.fetchMsgAndCount(); // 操作成功后刷新数据
            this.showOperationMessage(`已放入 ${this.quantity} 个物品`, 'success');
          } else {
            this.showOperationMessage('操作失败', 'error');
          }
        })
        .catch(() => {
          this.showOperationMessage('请求失败', 'error');
        });
    },
    // 显示操作消息
    showOperationMessage(message, type) {
      this.$notify({
                title: '提示',
                message: message
            })
    },
  }
};
</script>

<style scoped>
.feature-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7em 0.7em;
  margin-bottom: 0.5em;
}
.feature-tag {
  display: inline-block;
  background: #f3f4f6;
  color: #374151;
  border-radius: 16px;
  padding: 0.2em 1em;
  font-size: 1rem;
  font-weight: 500;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  border: 1px solid #e5e7eb;
  transition: background 0.2s;
}
.refresh-btn {
  background-color: #0ea5e9;
  color: #fff;
  margin-left: 1.2rem;
}
.refresh-btn:hover {
  background-color: #0369a1;
  transform: translateY(-2px);
}
/* 横向切分样式 */
.quantity-controller-split {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background-color: #f8fafc;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  margin-bottom: 1.5rem;
  padding: 1.5rem 1rem;
  gap: 2rem;
}
.quantity-info-box {
  min-width: 160px;
  background: rgba(200,200,200,0.25);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(99,102,241,0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.2rem 1rem;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  position: relative;
}
.quantity-info-title {
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
  letter-spacing: 2px;
  color: #222;
  text-shadow: none;
}
.quantity-info-value {
  font-size: 2.8rem;
  font-weight: 900;
  margin-bottom: 0.5rem;
  color: #e11d48;
  letter-spacing: 2px;
  text-shadow: none;
}
.quantity-info-desc {
  font-size: 1rem;
  opacity: 0.95;
  margin-top: 0.5rem;
  text-align: center;
  color: #222;
  text-shadow: none;
}
.red { color: #e11d48; }
.black { color: #222; }
.align-box { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.controller-ops-box { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.controller-wrapper { width: 100%; justify-content: center; }
.controller-btns-row { width: 100%; display: flex; justify-content: center; gap: 1.2rem; margin-top: 1.2rem; }
.controller-ops-box {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
/* 保持与之前相同的样式 */
.main-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #333;
  line-height: 1.6;
}

.page-title {
  color: #2c3e50;
  text-align: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #f0f0f0;
}

.url-params-info {
  background-color: #f8fafc;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.url-params-info h2 {
  color: #3b82f6;
  margin-top: 0;
  margin-bottom: 1rem;
}

.param-item {
  margin-bottom: 0.8rem;
  padding: 0.5rem;
  border-radius: 4px;
  background-color: rgba(59, 130, 246, 0.05);
}

.param-label {
  font-weight: 600;
  color: #475569;
  display: inline-block;
  width: 120px;
}

.param-value {
  color: #1e40af;
  font-family: monospace;
  padding: 0.2rem 0.4rem;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 3px;
}

.long-introduction {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  border: 1px solid #e2e8f0;
}

.long-introduction h2 {
  color: #1e293b;
  margin-top: 0;
  margin-bottom: 1rem;
}

.long-introduction p {
  margin-bottom: 1rem;
  color: #475569;
}

.quantity-controller {
  background-color: #f8fafc;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.quantity-controller h2 {
  color: #3b82f6;
  margin-top: 0;
  margin-bottom: 1.5rem;
}

.controller-wrapper {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  justify-content: center;
}

.control-btn {
  padding: 0.8rem 1.2rem;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 60px;
}

.decrement-5, .decrement-1 {
  background-color: #ef4444;
  color: white;
}

.decrement-5:hover, .decrement-1:hover {
  background-color: #dc2626;
  transform: translateY(-2px);
}

.increment-1, .increment-5 {
  background-color: #22c55e;
  color: white;
}

.increment-1:hover, .increment-5:hover {
  background-color: #16a34a;
  transform: translateY(-2px);
}

.quantity-input {
  width: 120px;
  padding: 0.8rem;
  font-size: 1.1rem;
  text-align: center;
  border: 2px solid #94a3b8;
  border-radius: 6px;
  font-weight: 600;
}

.quantity-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.action-btn {
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.take-out {
  background-color: #f59e0b;
  color: white;
}

.take-out:hover {
  background-color: #d97706;
  transform: translateY(-2px);
}

.put-back {
  background-color: #6366f1;
  color: white;
}

.put-back:hover {
  background-color: #4f46e5;
  transform: translateY(-2px);
}

.operation-result {
  padding: 1rem 1.5rem;
  border-radius: 6px;
  text-align: center;
  font-weight: 500;
  margin-top: 1rem;
  animation: fadeIn 0.3s ease;
}

.success {
  background-color: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.error {
  background-color: #fee2e2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .main-container {
    padding: 1rem;
  }
  
  .controller-wrapper {
    gap: 0.5rem;
  }
  
  .control-btn, .action-btn {
    padding: 0.6rem 0.8rem;
    font-size: 0.9rem;
  }
}
</style>
